<template>
  <div class="table">
    <el-main>
      <div class="header_right" @click="showCardNav = !showCardNav">
        <div class="title">搜索</div>
        <div>
          <transition name="from"></transition>
          <span v-show="!showCardNav">
            <i style="margin-right: 5px" class="el-icon-arrow-down"></i>
          </span>
          <transition name="to"></transition>
          <span v-show="showCardNav">
            <i style="margin-right: 5px" class="el-icon-arrow-up"></i>
          </span>
        </div>
      </div>
      <div v-show="showCardNav" class="hr"></div>
      <el-collapse-transition>
        <div v-show="showCardNav">
          <div class="search">
            <span style="display: inline-block;margin-bottom: 10px;">
              <span style="margin-right: 12px">交工资料内容</span>
              <el-input v-model="tableParam.content" style="width: 150px" clearable @keyup.enter.native="gettableData()" />
            </span>
            <span style="margin-left: 24px">
              <span style="margin-right: 12px">交工工程名称</span>
              <el-input v-model="tableParam.handOverEngineeringName" style="width: 150px" clearable @keyup.enter.native="gettableData()" />
            </span>
            <span style="margin-left: 24px">
              <span style="margin-right: 12px">状态</span>
              <el-select v-model="tableParam.exportStatus" placeholder="请选择" @keyup.enter.native="gettableData()">
                <el-option label="待导出" :value="1"></el-option>
                <el-option label="已导出" :value="2"></el-option>
              </el-select>
            </span>
            <el-button icon="el-icon-search" size="medium" class="bottom_all but1" @click="(tableParam.page = 1), gettableData()">查 询</el-button>
            <el-button size="medium" class="bottom_all_two" style="margin-left: 12px" @click="init()">重 置</el-button>
          </div>
        </div>
      </el-collapse-transition>
      <div class="hr"></div>
      <div class="card">
        <div class="card_nav">
          <div>
            <!-- <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='TIANJIA'))!==-1" size="small" class="bottom_all" style="margin-left: 0" @click="addFromDate('添加'),principalName=''">
              <i class="icon iconfont iconicon_button_add" style="font-size: 12px"></i>
              添加
            </el-button> -->
            <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='SHANCHU'))!==-1" size="small" class="bottom_two" @click="Delete()">
              <i class="icon iconfont iconicon_button_delete" style="font-size: 12px"></i>
              删除
            </el-button>
          </div>
          <div>
            <el-dropdown :hide-on-click="false" trigger="click" style="margin: 0 20px">
              <el-link :underline="false">
                <span class="el-icon--left">
                  <i class="iconfont iconicon_button_filtrate"></i>
                </span>
                筛选
              </el-link>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(item, index) in table" :key="index">
                  <el-checkbox v-model="item.status">{{
                    item.label
                    }}</el-checkbox>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-link v-if="ButtonList.findIndex(res=>(res.buttonValue=='DAOCHU'))!==-1" :underline="false" @click="load()">
              <span class="el-icon--left">
                <i class="iconfont iconicon_button_export1"></i>
              </span>
              导出
            </el-link>
          </div>
        </div>
        <div v-loading="tableLoading" class="card_info" :style="style">
          <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="tableData" tooltip-effect="dark">
            <template v-for="(item, index2) in table">
              <el-table-column v-if="item.status" :key="index2" :label="item.label" align="center" :min-width="item.width" :fixed="(item.label =='操作'||item.label =='生产线'||item.label =='使用仓'||item.label =='库存仓'||item.label =='浆水池')?'right':false">
                <template slot-scope="scope">
                  <span v-if="item.label == '状态'">
                    <span v-if="scope.row.exportStatus == 1" style="color: #969799">待导出</span>
                    <span v-if="scope.row.exportStatus == 2" style="color: #00a754">已导出</span>
                  </span>
                  <span v-else-if="item.label == '审核状态'">
                    <span v-if="scope.row.auditStatus == 1" style="color: #969799">待提交</span>
                    <span v-if="scope.row.auditStatus == 2" style="color: #969799">审核中</span>
                    <span v-if="scope.row.auditStatus == 3" style="color: #00a754">已通过</span>
                    <span v-if="scope.row.auditStatus == 4" style="color: #969799">已驳回</span>
                  </span>
                  <div v-else-if="item.label == '操作'" style="position: relative;">
                    <el-dropdown :hide-on-click="false" trigger="click">
                      <el-button size="mini" class="bottom_one">更多</el-button>
                      <el-dropdown-menu slot="dropdown" style="text-align: center">
                        <el-dropdown-item>
                          <el-button style="margin:5px 0" class="bottom_one" size="mini" @click="look1Fun(scope.row)">
                            修改
                          </el-button>
                        </el-dropdown-item>
                        <el-dropdown-item>
                          <el-button size="mini" style="margin:5px 0" class="bottom_one" @click="look2Fun(scope.row)">查看计划</el-button>
                        </el-dropdown-item>
                        <el-dropdown-item>
                          <el-button size="mini" style="margin:5px 0" class="bottom_one" @click="signFun(scope.row)">提交审核</el-button>
                        </el-dropdown-item>
                        <el-dropdown-item>
                          <el-button :disabled="scope.row.auditStatus!=3" size="mini" style="margin:5px 0" class="bottom_one" @click="exportFun(scope.row)">导出资料</el-button>
                        </el-dropdown-item>
                        <el-dropdown-item>
                          <el-button :disabled="scope.row.auditStatus!=3" style="margin:5px 0" class="bottom_one" size="mini">
                            打印资料
                          </el-button>
                        </el-dropdown-item>
                        <el-dropdown-item>
                          <el-button :disabled="scope.row.auditStatus!=3" size="mini" style="margin:5px 0" class="bottom_one" @click="wpsFun(scope.row)">预览资料</el-button>
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                  <span v-else>{{ scope.row[item.prop] }}</span>
                </template>
              </el-table-column>
            </template>
          </el-table>
        </div>
        <div class="card_bottom">
          <div class="card_bottom_left">
            <div class="top_page_totle">总共{{ total }}条</div>
            <el-pagination :current-page.sync="tableParam.page" :page-size="tableParam.pageSize" :page-sizes="[10, 20, 30, 40,50,100,200,500,1000]" layout="prev,pager,sizes,next,jumper" :total="total" @size-change="sizeChange" @current-change="gettableData()"></el-pagination>
          </div>
          <div>
            <el-button size="mini" icon="el-icon-refresh-right" class="bottom_all_two" @click="gettableData">刷新</el-button>
          </div>
        </div>
      </div>
    </el-main>
    <!-- 修改交工资料 -->
    <el-dialog v-dialogDrag :visible.sync="look1Type" width="720px" :close-on-click-modal="false" :before-close="resetFromDate">
      <span slot="title" class="dialog-title">修改交工资料</span>
      <div class="dialoginfo">
        <el-form ref="look1form" :rules="rules" :inline="true" :model="look1form" label-width="110px">
          <el-form-item prop="handOverEngineeringName" :rules="[{required: true,message: '请输入交工工程名称',trigger: 'change',}]">
            <span slot="label" style="color:#FF0000;">交工资料名称</span>
            <el-input v-model="look1form.handOverEngineeringName" placeholder="请输入" style="width:380px;"></el-input>
          </el-form-item>
          <el-form-item prop="handOverEngineeringName" :rules="[{required: true,message: '请输入交工工程名称',trigger: 'change',}]">
            <span slot="label" style="color:#FF0000;">交工工程名称</span>
            <el-input v-model="look1form.handOverEngineeringName" placeholder="请输入" style="width:380px;"></el-input>
          </el-form-item>
          <el-form-item prop="signerId0" :rules="[{required: true,message: '请选择签发人',trigger: 'change',}]">
            <span slot="label" style="color:#FF0000;">签发人</span>
            <el-cascader ref="signerId0" v-model="look1form.signerId0" :placeholder="signerId0Name" style="width:380px;" :options="signerIdList" :show-all-levels="false" :props="{ value:'id',label: 'name'}" collapse-tags @change="$nextTick(()=>{look1form.signer =$refs.signerId0.getCheckedNodes()[0].label,look1form.signerId =$refs.signerId0.getCheckedNodes()[0].value})"></el-cascader>
          </el-form-item>
          <el-form-item prop="checkOneId0" :rules="[{required: true,message: '请选择校核人',trigger: 'change',}]">
            <span slot="label" style="color:#FF0000;">校核人</span>
            <el-cascader ref="checkOneId0" v-model="look1form.checkOneId0" :placeholder="checkOneId0Name" style="width:380px;" :options="signerIdList" :show-all-levels="false" :props="{ value:'id',label: 'name'}" collapse-tags @change="$nextTick(()=>{look1form.checkOne =$refs.checkOneId0.getCheckedNodes()[0].label,look1form.checkOneId =$refs.checkOneId0.getCheckedNodes()[0].value})"></el-cascader>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="look1Type=false">取 消</el-button>
        <el-button class="bottom_all" style="margin-left: 24px" @click="submit1()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import mixin from "@/mixins/ICPSmixin.js";
import {
  queryPage,
  updateResod,
  deleteResord,
  exportHandOver,
  previewHandOver,
} from "@/api/smart/components_data/dataCompletion.js";
import { orgUserTree } from "@/api/common.js";
export default {
  mixins: [mixin],
  data() {
    return {
      exportHandOver: exportHandOver,
      signerId0Name: '',
      checkOneId0Name: '',
      signerIdList: [],
      UserInfo: "",
      companylist: [],
      stationIdlist: [],
      /*表格增删改查及下载接口*/
      queryPage: queryPage,
      pagesType: 0,
      /*表格数据*/
      table: [
        { label: "交工资料编号", width: "160", prop: "dataNumber", status: true },
        { label: "交工资料内容", width: "160", prop: "content", status: true },
        { label: "交工工程名称", width: "140", prop: "handOverEngineeringName", status: true },
        { label: "交工施工单位", width: "140", prop: "handOverRoadwork", status: true },
        { label: "签发人", width: "140", prop: "signer", status: true },
        { label: "校核人", width: "140", prop: "checkOne", status: true },
        { label: "工程名称", width: "140", prop: "engineeringName", status: true },
        { label: "生成人", width: "140", prop: "createUserName", status: true },
        { label: "导出时间", width: "140", prop: "exportTime", status: true },
        { label: "状态", width: "140", prop: "", status: true },
        { label: "审核状态", width: "100", prop: "", status: true },
        { label: "操作", width: "80", status: true },
      ],
      /*添加表单数据*/
      rules: {
        code: [
          { required: true, message: "请选输入站点编码", trigger: "blur" },
        ],
        dailyCapacity: [
          { required: true, message: "请输入日产能", trigger: "blur" },
        ],
        stationAddress: [
          { required: true, message: "请输入站点地址", trigger: "change" },
        ],
        principalId: [
          { required: true, message: "请选择负责人", trigger: "change" },
        ],
        stationPhone: [
          { required: true, message: "请输入站点电话", trigger: "blur" },
        ],
        outsourcingUnitIds: [
          { required: true, message: "请输入外协单位", trigger: "change" },
        ],
      },
      look1form: {
        signerId0: '',
        checkOneId0: '',
      },
      look1Type: false
    };
  },
  async created() {
    this.gettableData()
    //获取当前账号公司id的组织树
    this.signerIdList = await orgUserTree(this.UserInfo.companyId);
  },
  methods: {
    signFun(data) {
      const params = {
        type: 1,
        dataNumber: data.dataNumber,
        content: data.content,
        handOverEngineeringName: data.handOverEngineeringName,
        signer: data.signer,
        checkOne: data.checkOne,
        id: data.id,
      }
      this.$router.push({ name: "sign_smartdata", query: params });
    },
    deleteResordFun() {
      this.$confirm('此操作将删除订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'bottom_all_two',
        confirmButtonClass: 'bottom_all',
        type: 'warning'
      }).then(() => {
        deleteResord().then((res) => {
          if (res.code == 1001) {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.gettableData()
          }
        })
      })
    },
    /**查看计划 */
    look2Fun(row) {
      let json = {
        handOverDataId: row.id,
        engineeringId: row.engineeringId,
        engineeringName: row.engineeringName,
        place: row.place,
      }
      this.$router.push({ name: 'smartdataPlan', query: json })
    },
    /**导出 */
    exportFun(low) {
      this.$Download(this.exportHandOver, { id: low.id });
    },
    /**预览 */
    wpsFun(low) {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
      });
      previewHandOver({ id: low.id }).then((res) => {
        loading.close();
        if (res.code == 1001) {
          this.$wps(res.data.data.fileUrl)
        }
      })
    },
    /**修改交工资料 */
    submit1() {
      updateResod(this.look1form).then((res) => {
        if (res.code == 1001) {
          this.look1Type = false
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.gettableData()
        }
      })
    },
    look1Fun(row) {
      this.look1Type = true
      this.look1form = row
      this.signerId0Name = row.signer
      this.checkOneId0Name = row.checkOne
      this.$nextTick(() => {
        this.$refs.look1form.clearValidate();
      })
    },
    /*重置数据*/
    init() {
      this.tableParam.handOverEngineeringName = "";
      this.tableParam.content = "";
      this.tableParam.exportStatus = "";
      this.gettableData();
    },
    sizeChange(value) {
      this.tableParam.pageSize = value;
      this.gettableData();
    },
  },
};
</script>